<template>
    <div class="inform">
        <div>
            <header>
                <h1>今日经贸</h1>
                <div>
                    <img @click="toSearch()" src="../assets/搜索.png" alt="">
                    <img src="http://www.hnjmxy.cn/images/db_logo.jpg" alt="">
                </div>
            </header>
            <div id="tabBox1" class="tabBox">
                <div class="navhd">
                    <div class="hd hdi" width="100vw">
                        <ul id="navi">
                            <li><a href="javascript:void(0)">经贸头条</a></li>
                            <li><a href="javascript:void(0)">经贸新闻</a></li>
                            <li><a href="javascript:void(0)">智慧校园</a></li>
                            <li><a href="javascript:void(0)">校务公开</a></li>
                            <li><a href="javascript:void(0)">教学科研</a></li>
                            <li><a href="javascript:void(0)">校园生活</a></li>
                            <li><a href="javascript:void(0)">院部动态</a></li>
                        </ul>
                    </div>
                </div>
                <div class="bd" id="tabBox1-bd">
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li v-for="news in newsjson.list">
                                <a href="#">
                                    <div>{{news.title}}</div>
                                    <img :src="news.picLinks" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li v-for="news in newsjson.list">
                                <a href="#">
                                    <div>{{news.title}}</div>
                                    <img :src="news.picLinks" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li v-for="news in newsjson.list">
                                <a href="#">
                                    <div>{{news.title}}</div>
                                    <img :src="news.picLinks" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li v-for="news in newsjson.list">
                                <a href="#">
                                    <div>{{news.title}}</div>
                                    <img :src="news.picLinks" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li style="height: 80vh;text-align:center;"><a href="#">暂无内容</a></li>
                        </ul>
                    </div>
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li style="height: 80vh;text-align:center;"><a href="#">暂无内容</a></li>
                        </ul>
                    </div>
                    <div class="con"><!-- 高度自适应需添加外层 -->
                        <ul>
                            <li style="height: 80vh;text-align:center;"><a href="#">暂无内容</a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import {Swiper} from 'vux'
    import json from '../../static/json/news.json'
    export default {
        name: "inform",
        data: function () {
            return {
                newsjson:json
            }
        },
        components: {
            Swiper,
        },
        methods: {

        },
        mounted(){
            var nav_w=$(".hdi li").first().width();
            $(".hdi li").on('click', function(){
                nav_w=$(this).width();
                $(this).addClass("on").siblings().removeClass("on");
                var fn_w = ($(".navhd").width() - nav_w) / 2;
                var fnl_l;
                var fnl_x = parseInt($(this).position().left);
                if (fnl_x <= fn_w){
                    fnl_l = 0;
                }else if(fn_w - fnl_x <= flb_w - fl_w) {
                    fnl_l = flb_w - fl_w;
                }else{
                    fnl_l = fn_w - fnl_x;
                }
                $(".hdi").animate({"left" : fnl_l}, 300);

            });
            var fl_w=$(".hdi").width();
            var flb_w=$(".navhd").width();
            var x1,y1,ty_left,fnl_x
            $(".hdi").on('touchstart', function (e) {
                var touch1 = e.originalEvent.targetTouches[0];
                x1 = touch1.pageX;
                y1 = touch1.pageY;
                ty_left = parseInt($(this).css("left"));
            });
            $(".hdi").on('touchmove', function (e) {
                var touch2 = e.originalEvent.targetTouches[0];
                var x2 = touch2.pageX;
                var y2 = touch2.pageY;
                if(ty_left + x2 - x1>=0){
                    $(this).css("left", 0);
                }else if(ty_left + x2 - x1<=flb_w-fl_w){
                    $(this).css("left", flb_w-fl_w);
                }else{
                    $(this).css("left", ty_left + x2 - x1);
                }
                if(Math.abs(y2-y1)>0){
                    e.preventDefault();
                }
            });
            TouchSlide( { slideCell:"#tabBox1",
                endFun:function(i){
                    //联动切换
                    var as=document.getElementById("navi").getElementsByTagName('a');
                    fnl_x =  parseInt($(".hdi li").eq(i).position().left);
                    nav_w=$(".hdi li").eq(i).width();
                    $(".hdi li").eq(i).addClass("on").siblings().removeClass("on");
                    var fn_w = ($(".navhd").width() - nav_w) / 2;
                    var fnl_l;
                    if (fnl_x <= fn_w) {
                        fnl_l = 0;
                    } else if (fn_w - fnl_x <= flb_w - fl_w) {
                        fnl_l = flb_w - fl_w;
                    } else {
                        fnl_l = fn_w - fnl_x;
                    }
                    $(".hdi").animate({
                        "left" : fnl_l
                    }, 300);

                    //高度自适应
                    var bd = document.getElementById("tabBox1-bd");
                    bd.parentNode.style.height = bd.children[i].children[0].offsetHeight+"px";
                    if(i>0)bd.parentNode.style.transition="200ms";//添加动画效果
                }
            });
        }
    }
</script>

<style scoped>
    .inform{
        position: relative;
    }
    @import "../../static/css/css.css";
    header {
        height: 20vw;
        background: #005BAC;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header img:nth-child(1) {
        width: 10vw;
        height: 10vw;
    }

    header img:nth-child(2) {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        margin-right: 4vw;
    }

    header h1 {
        color: white;
        margin-left: 4vw;
    }
    * {
        font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
        padding: 0;
        list-style: none;
        margin: 0;
    }
    a {
        color: #333;
        text-decoration: none;
        cursor: pointer;
    }
    /* Tab切换 */
    .tabBox .navhd {
        height: 44px;
        width: 100%;
        position: relative;
        overflow: hidden;
        line-height: 44px;
        -moz-box-flex: 1;
        background: #eee;
        border-bottom: 1px solid #ddd;
        -webkit-box-flex: 1;
        box-flex: 1;
    }
    .tabBox .hd {
        position: absolute;
        left: auto;
    }
    .tabBox .hd ul {
        position: relative;
        white-space: nowrap;
    }
    .tabBox .hd ul li {
        display: inline-block;
        margin-right: 10px;
    }
    .tabBox .hd ul li a {
        display: block;
        padding: 0 10px;
        line-height: 40px;
        font-size: 16px;
        text-align: center;
        border-bottom: solid 2px #eee;
        color: #666;
    }
    .tabBox .hd ul li.on a {
        color: #48a5f4 !important;
        border-bottom: solid 2px #48a5f4;
    }
    .tabBox .con{padding:0 10px;}
    .tabBox .bd li{ padding: 10px 0; border-bottom:dotted 1px #eee;}
    li img{
        width: 100%;
        height: 100%;
    }
</style>
